<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="购物车" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="cart">
			<view class="cart-bgbanner"></view>
			<view class="cart-list">
				<view class="cart-list-wrap">
					<view class="cart-list-wrap-name">
						<image @click="onClickChangeAllSelectFlag" :src="allSelectFlag === true ? commonImg('select.png') : commonImg('no-select.png')" class="cart-list-wrap-name-select"></image>
						<view class="cart-list-wrap-name-info">
							<text class="cart-list-wrap-name-info-name">{{ cart.storeName }}</text>
							<view class="cart-list-wrap-name-info-zhe">
								<view class="cart-list-wrap-name-info-zhe-left">
									<text class="cart-list-wrap-name-info-zhe-left-txt">折</text>
									<text class="cart-list-wrap-name-info-zhe-left-content">PLUS会员{{ vip2 }}折</text>
								</view>
								<view class="cart-list-wrap-name-info-zhe-right">
									<text class="cart-list-wrap-name-info-zhe-right-txt">折</text>
									<text class="cart-list-wrap-name-info-zhe-right-content">会员{{ vip1 }}折</text>
								</view>
							</view>
							<view class="cart-list-wrap-name-info-line"></view>
						</view>
					</view>
					<view class="cart-list-wrap-list">
						<view v-for="(item, index) of cartList" :key="item.id" class="cart-list-wrap-list-item">
							<image v-if="item.goodsSum > 0" @click="onClickMofidySelected(index)" :src="item.selected === true ? commonImg('select.png') : commonImg('no-select.png')" class="cart-list-wrap-list-item-select"></image>
							<view v-if="item.goodsSum > 0" class="cart-list-wrap-list-item-info">
								<image :src="commonImg(item.goodsImage)" class="cart-list-wrap-list-item-info-img"></image>
								<view class="cart-list-wrap-list-item-info-content">
									<text class="cart-list-wrap-list-item-info-content-name">{{ item.goodsName }}</text>
									<view class="cart-list-wrap-list-item-info-content-handle">
										<view class="cart-list-wrap-list-item-info-content-handle-price">
											<text class="cart-list-wrap-list-item-info-content-handle-price-mark">￥</text>
											<text class="cart-list-wrap-list-item-info-content-handle-price-num">{{ item.goodsPrice }}</text>
										</view>
										<view class="cart-list-wrap-list-item-info-content-handle-jj">
											<image v-if="item.goodsSum > 0" @click="onClickJianNum(item)" :src="commonImg('jian.png')" class="cart-list-wrap-list-item-info-content-handle-jj-jian"></image>
											<text v-if="item.goodsSum > 0" class="cart-list-wrap-list-item-info-content-handle-jj-num">{{ item.goodsSum }}</text>
											<image @click="onClickJiaNum(item)" :src="commonImg('jia.png')" class="cart-list-wrap-list-item-info-content-handle-jj-jia"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="cart-list-wrap-price">
						<view class="cart-list-wrap-price-wrap">
							<view class="cart-list-wrap-price-wrap-left">配送费用<text class="cart-list-wrap-price-wrap-left-txt">￥{{ cart.freight }}</text></view>
							<view class="cart-list-wrap-price-wrap-left">包装费<text class="cart-list-wrap-price-wrap-left-txt">￥{{ cart.packing }}</text></view>
						</view>
					</view>
				</view>
			</view>
			<view @click="onClickGotoZF" class="cart-js"><button class="cart-js-btn">去结算</button></view>
		</view>
	</view>
</template>
<script>
import { config } from '@/utils/config.js';
import { myMixin } from '@/utils/mixin.js';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

export default {
	mixins: [myMixin],
	data() {
		return {
			id: '',
			cartList: [],
			old_cartList: [],
			plus: false,
			cart: {},
			rate: '',
			vip2: '',
			vip1: '',
			allSelectFlag: false
		};
	},
	components: {
		uniNavBar
	},
	onLoad(e) {
		if (e && e.id) {
			this.id = e.id
		}
		const token = uni.getStorageSync('token')
		if (!token) {
			uni.showToast({
				icon: 'none',
				title: '尚未登录, 请先登录'
			})
			setTimeout(() => {
				uni.removeStorageSync('role')
				uni.removeStorageSync('memberId')
				uni.removeStorageSync('token')
				uni.removeStorageSync('openId')
				uni.reLaunch({
					url: '../verificationcodelogin/verificationcodelogin'
				})
			}, 777)
			return false
		}
		uni.showLoading({
			title: '加载中'
		})
		setTimeout(() => {
			this._getCartData(this.id) // 购物车
		}, 3333)
	},
	methods: {
		back() {
			uni.navigateBack({})
		},
		onClickChangeAllSelectFlag() {
			this.allSelectFlag = !this.allSelectFlag
			if (this.allSelectFlag === true) {
				for (const item of this.cartList) {
					item.selected = true
				}
			} else if (this.allSelectFlag === false) {
				for (const item of this.cartList) {
					item.selected = false
				}
			}
		},
		onClickMofidySelected(index) {
			this.cartList[index].selected = !this.cartList[index].selected
			this._computedAllSelectByCartList()
		},
		onClickGotoZF() {
			const jsArr = []
			const saveArr = []
			if ((this.cartList !== undefined) && (this.cartList.length)) {
				for (const item of this.cartList) {
					if (item.selected === true) {
						jsArr.push({ goodsId: item.goodsId, goodsSum: item.goodsSum })
					}
					if (item.selected === false) {
						saveArr.push(item)
					}
				}
			}
			if (!jsArr.length) {
				uni.showToast({
					icon: 'none',
					title: '暂时无法结算, 暂无选择商品'
				})
				return false
			}
			let obj = {}
			obj.cartId = this.cart.id
			obj.goods = jsArr
			obj = JSON.stringify(obj)
			uni.request({
				url: `${config.api_base_url}member/cart/addCartToOrders`,
				method: 'POST',
				header: {
					'AUTH': 'ROBOT ' + uni.getStorageSync('token'),
					'Content-Type': 'application/json'
				},
				data: obj,
				success: ((res) => {
					let { status, data } = res.data
					if (status.flag === true) {
						uni.navigateTo({
							url: '../onlinepay/onlinepay'
						});
					}
				})
			})
			if (saveArr.length) {
				let obj = {}
				let goods = []
				for (const item of saveArr) {
					if (item.goodsId) {
						const obj = {}
						obj.goodsId = item.goodsId
						obj.goodsSum = item.goodsSum
						goods.push(obj)
					}
				}
				obj.goods = goods
				obj = JSON.stringify(obj)
				uni.request({
					url: `${config.api_base_url}member/cart/${this.id}`,
					method: 'PUT',
					header: {
						'AUTH': 'ROBOT ' + uni.getStorageSync('token')
					},
					data: obj,
					success: ((res) => {
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '保存失败'
						})
					})
				})
			}
		},
		_getCartData(id) {
			if (!id) {
				uni.showToast({
					icon: 'none',
					title: '暂无商铺id，无法查看'
				})
				return false
			}
			uni.request({
				url: `${config.api_base_url}member/cart/${id}`,
				header: {
					'AUTH': 'ROBOT ' + uni.getStorageSync('token')
				},
				success: ((res) => {
					let { status, data } = res.data
					let cartList = []
					if (status.flag === true && (data.shoppingCartDetails !== undefined) && (data.shoppingCartDetails.length)) {
						for (const item of data.shoppingCartDetails[0].cartDetailsList) {
							item.selected = true
						}
						this.cartList = JSON.parse(JSON.stringify(data.shoppingCartDetails[0].cartDetailsList))
						this.old_cartList = JSON.parse(JSON.stringify(data.shoppingCartDetails[0].cartDetailsList))
						this.plus = data.plus
						this.cart = data.shoppingCartDetails[0].cart
						this.rate = data.shoppingCartDetails[0].rate
						const vip2 = JSON.parse(this.rate).vip2;
						this.vip2 = Math.floor(vip2 * 100) / 10;
						const vip1 = JSON.parse(this.rate).vip1;
						this.vip1 = Math.floor(vip1 * 100) / 10;
						this._computedAllSelectByCartList()
					} else {
						this.cartList = []
						this.old_cartList = []
						this.plus = false
						this.cart = false
						this.rate = false
					}
				}),
				fail: (() => {
					uni.showToast({
						icon: 'none',
						title: '查询购物车失败, 暂无数据'
					})
				}),
				complete: (() => {
					uni.hideLoading()
				})
			})
		},
		onClickJianNum(obj) {
			this.cartList.forEach((item, index) => {
				if (item.goodsId === obj.goodsId) {
					item.goodsSum -= 1
					if (item.goodsSum === 0) {
						this.cartList.splice(index, 1)
						this._computedAllSelectByCartList()
					}
				}
			})
		},
		onClickJiaNum(obj) {
			this.cartList.forEach((item, index) => {
				if (item.goodsId === obj.goodsId) {
					item.goodsSum += 1
				}
			})
		},
		_computedAllSelectByCartList() {
			let num = 0
			const cartList = this.cartList
			for (const item of cartList) {
				if (item.selected === true) {
					num += 1
				}
			}
			if (cartList.length === num) {
				this.allSelectFlag = true
			} else {
				this.allSelectFlag = false
			}
		}
	}
};
</script>
<style>
page {
	background-color: #f7f4f8;
}
</style>
<style scoped>
.cart {
	width: 100%;
}

.cart-bgbanner {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 244rpx;
	background: linear-gradient(180deg, rgba(240, 34, 48, 1) 0%, rgba(245, 245, 245, 1) 100%);
}

.cart-list {
	position: absolute;
	width: 100%;
	box-sizing: border-box;
	padding-left: 16rpx;
	padding-right: 14rpx;
	padding-top: 54rpx;
}

.cart-list-wrap {
	width: 100%;
	height: 100%;
	background-color: #fff;
	box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
	border-radius: 12rpx;
	box-sizing: border-box;
	padding-top: 24rpx;
	padding-right: 20rpx;
	padding-left: 14rpx;
	display: flex;
	flex-direction: column;
}

.cart-list-wrap-name {
	width: 100%;
	display: flex;
	align-items: flex-start;
}

.cart-list-wrap-name-select {
	width: 33rpx;
	height: 33rpx;
	border-radius: 50%;
	margin-top: 4rpx;
	margin-right: 22rpx;
}

.cart-list-wrap-name-info {
	width: calc(100% - 56rpx);
	display: flex;
	flex-direction: column;
}

.cart-list-wrap-name-info-name {
	font-size: 28rpx;
	line-height: 40rpx;
	font-weight: 500;
	color: #000000;
	margin-bottom: 8rpx;
}

.cart-list-wrap-name-info-zhe {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.cart-list-wrap-name-info-zhe-left {
	display: flex;
	align-items: center;
	margin-right: 44rpx;
}

.cart-list-wrap-name-info-zhe-left-txt {
	padding: 2rpx 4rpx 0 8rpx;
	font-size: 24rpx;
	line-height: 34rpx;
	font-weight: 400;
	color: #e8541e;
	background: rgba(233, 90, 39, 0.1);
	border-radius: 2rpx;
	margin-right: 10rpx;
}

.cart-list-wrap-name-info-zhe-left-content {
	font-size: 24rpx;
	color: #e8541e;
	line-height: 34rpx;
	font-weight: 400;
}

.cart-list-wrap-name-info-zhe-right {
	display: flex;
	align-items: center;
}

.cart-list-wrap-name-info-zhe-right-txt {
	padding: 2rpx 4rpx 0 8rpx;
	font-size: 24rpx;
	line-height: 34rpx;
	font-weight: 400;
	color: #1e92e8;
	background: rgba(30, 146, 232, 0.1);
	border-radius: 2rpx;
	margin-right: 10rpx;
}

.cart-list-wrap-name-info-zhe-right-content {
	font-size: 24rpx;
	color: #1e92e8;
	line-height: 34rpx;
	font-weight: 400;
}

.cart-list-wrap-name-info-line {
	width: 100%;
	height: 4rpx;
	background-color: #eeeeee;
}

.cart-list-wrap-list {
	width: 100%;
	box-sizing: border-box;
	padding-top: 16rpx;
	padding-bottom: 16rpx;
	display: flex;
	flex-direction: column;
}

.cart-list-wrap-list-item {
	display: flex;
	align-items: center;
	margin-bottom: 18rpx;
}

.cart-list-wrap-list-item:last-child {
	margin-bottom: 0;
}

.cart-list-wrap-list-item-select {
	width: 33rpx;
	height: 33rpx;
	border-radius: 50%;
	margin-right: 22rpx;
}

.cart-list-wrap-list-item-info {
	display: flex;
	width: calc(100% - 56rpx);
}

.cart-list-wrap-list-item-info-img {
	width: 124rpx;
	height: 104rpx;
	border-radius: 8rpx;
	margin-right: 28rpx;
	background-color: #eee;
}

.cart-list-wrap-list-item-info-content {
	width: calc(100% - 154rpx);
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 6rpx;
}

.cart-list-wrap-list-item-info-content-name {
	font-size: 28rpx;
	color: #000000;
	line-height: 40rpx;
	font-weight: 400;
}

.cart-list-wrap-list-item-info-content-handle {
	display: flex;
	align-items: flex-start;
}

.cart-list-wrap-list-item-info-content-handle-price {
	margin-top: 12rpx;
	display: flex;
	align-items: baseline;
}

.cart-list-wrap-list-item-info-content-handle-price-mark {
	font-size: 18rpx;
	color: #f02230;
	font-weight: 500;
}

.cart-list-wrap-list-item-info-content-handle-price-num {
	font-size: 24rpx;
	color: #f02230;
	font-weight: 500;
}

.cart-list-wrap-list-item-info-content-handle-jj {
	display: flex;
	align-items: center;
	margin-right: 30rpx;
	margin-left: auto;
}

.cart-list-wrap-list-item-info-content-handle-jj-jian {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
}

.cart-list-wrap-list-item-info-content-handle-jj-num {
	margin-left: 22rpx;
	margin-right: 22rpx;
	font-size: 28rpx;
	line-height: 40rpx;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
}

.cart-list-wrap-list-item-info-content-handle-jj-jia {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
}

.cart-list-wrap-price {
	width: 100%;
	height: 94rpx;
	box-sizing: border-box;
	padding-left: 70rpx;
}

.cart-list-wrap-price-wrap {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-top: 4rpx solid #eeeeee;
	display: flex;
	align-items: center;
}

.cart-list-wrap-price-wrap-left {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	font-weight: 400;
	line-height: 40rpx;
	color: #000000;
	margin-right: 50rpx;
}

..cart-list-wrap-price-wrap-left:last-child {
	margin-right: 0;
}

.cart-list-wrap-price-wrap-left-txt {
	color: #f02230;
	margin-left: 10rpx;
}

.cart-js {
	width: 100%;
	box-sizing: border-box;
	padding-left: 70rpx;
	padding-right: 70rpx;
	height: 94rpx;
	position: fixed;
	left: 0;
	bottom: 84rpx;
}

.cart-js-btn {
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
	background-color: #f02230;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	font-weight: 500;
	color: #fff;
}
</style>
